<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词消消乐 - 在线版</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: #FFF8F0;
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh; padding: 20px; color: #333;
        }
        .header { text-align: center; margin-bottom: 30px; width: 100%; max-width: 1000px; }
        h1 {
            font-size: 3rem; color: #FF6B6B;
            text-shadow: 2px 2px 0 #FFD166;
            margin-bottom: 15px;
        }
        .game-info {
            font-size: 1.2rem; color: #555; margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.7); padding: 10px 20px;
            border-radius: 50px; display: inline-block;
        }
        .game-container {
            display: flex; flex-wrap: wrap; justify-content: center;
            gap: 15px; max-width: 1000px; margin: 0 auto;
            padding: 20px; 
        }
        .bubble {
            width: 130px; height: 130px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; font-weight: bold; color: white;
            text-align: center; cursor: pointer; padding: 10px;
            box-shadow: inset 0 -8px 0 rgba(0,0,0,0.2),
                       inset 0 8px 0 rgba(255,255,255,0.4),
                       0 8px 15px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: relative;
        }
        .bubble:hover { transform: translateY(-5px); }
        .bubble.selected { transform: scale(0.95); }
        .bubble.matched { 
            animation: pop 0.6s forwards;
            pointer-events: none;
        }
        @keyframes pop {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
            100% { transform: scale(0); opacity: 0; }
        }
        .success-message {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255, 248, 240, 0.95); display: flex;
            flex-direction: column; align-items: center; justify-content: center;
            z-index: 100; opacity: 0; pointer-events: none;
            transition: opacity 0.5s;
        }
        .success-message.show { opacity: 1; pointer-events: all; }
        .success-text {
            font-size: 3rem; color: #4ECDC4; margin-bottom: 30px;
            text-align: center;
        }
        .restart-btn {
            padding: 12px 25px; font-size: 1.3rem;
            background: #FF6B6B; color: white; border: none;
            border-radius: 50px; cursor: pointer;
        }
        .restart-btn:hover { background: #FF8E8E; }
        .score-panel {
            display: flex; justify-content: space-around;
            width: 100%; max-width: 800px; margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.8); padding: 12px 20px;
            border-radius: 15px;
        }
        .instructions {
            margin-top: 20px; padding: 15px;
            background: rgba(255, 255, 255, 0.8); border-radius: 10px;
            max-width: 800px; text-align: center;
        }
        .language-tag {
            position: absolute;
            top: 8px; right: 8px;
            font-size: 0.7rem;
            background: rgba(0,0,0,0.3);
            padding: 2px 6px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-gamepad"></i> 单词消消乐</h1>
        <div class="game-info">点击匹配中文和英文单词，全部匹配成功即可获胜！</div>
        <div class="score-panel">
            <div>已匹配: <span id="matchedCount">0</span>/<span id="totalCount">25</span></div>
            <div>尝试次数: <span id="attemptsCount">0</span></div>
            <div>准确率: <span id="accuracyRate">0%</span></div>
        </div>
    </div>
    
    <div class="game-container" id="gameContainer"></div>
    
    <div class="instructions">
        <p><i class="fas fa-lightbulb"></i> 游戏规则：点击一个泡泡选中它，再点击另一个泡泡尝试匹配。只有中文和英文正确匹配的泡泡才会消失！</p>
    </div>
    
    <div class="success-message" id="successMessage">
        <div class="success-text">恭喜你挑战成功!</div>
        <button class="restart-btn" onclick="restartGame()"><i class="fas fa-redo"></i> 再玩一次</button>
    </div>

    <script>
        // 单词配对数据
        const wordPairs = [
            { english: "challenging", chinese: "富有挑战性的" },
            { english: "chat", chinese: "闲谈" },
            { english: "fear", chinese: "害怕" },
            { english: "compile", chinese: "编辑" },
            { english: "average", chinese: "普通的" },
            { english: "contact", chinese: "熟人" },
            { english: "purpose", chinese: "意向" },
            { english: "reverse", chinese: "颠倒" },
            { english: "wonder", chinese: "对……感到疑惑" },
            { english: "insult", chinese: "冒犯" },
            { english: "talkative", chinese: "爱说话的" },
            { english: "confirm", chinese: "确认" },
            { english: "tricky", chinese: "复杂的" },
            { english: "strategically", chinese: "战略性地" },
            { english: "indicate", chinese: "暗示" },
            { english: "pick up", chinese: "拿起" },
            { english: "body language", chinese: "身体语言" },
            { english: "small talk", chinese: "闲谈" },
            { english: "get to the point", chinese: "讲到正题" },
            { english: "get down to", chinese: "开始认真对待" },
            { english: "after-sales service", chinese: "售后服务" },
            { english: "happen to", chinese: "碰巧做某事" },
            { english: "get a word in edgewise", chinese: "插嘴" },
            { english: "follow up with", chinese: "采取进一步行动" },
            { english: "get through", chinese: "完成" }
        ];

        const bubbleColors = ['#FF6B6B', '#4ECDC4', '#FFD166', '#118AB2', '#06D6A0', '#EF476F', '#3A86FF', '#FB5607'];
        let selectedBubble = null, matchedPairs = 0, totalPairs = wordPairs.length, attempts = 0, correctAttempts = 0;

        function initGame() {
            const gameContainer = document.getElementById('gameContainer');
            gameContainer.innerHTML = '';
            
            const allWords = [];
            wordPairs.forEach(pair => {
                allWords.push({ text: pair.english, type: 'english', pairId: pair.english });
                allWords.push({ text: pair.chinese, type: 'chinese', pairId: pair.english });
            });
            
            // 随机排序
            for (let i = allWords.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [allWords[i], allWords[j]] = [allWords[j], allWords[i]];
            }
            
            // 创建泡泡
            allWords.forEach((word, index) => {
                const bubble = document.createElement('div');
                bubble.className = 'bubble';
                bubble.textContent = word.text;
                bubble.dataset.type = word.type;
                bubble.dataset.pairId = word.pairId;
                bubble.style.backgroundColor = bubbleColors[index % bubbleColors.length];
                
                // 添加语言标签
                const langTag = document.createElement('div');
                langTag.className = 'language-tag';
                langTag.textContent = word.type === 'english' ? 'EN' : '中';
                bubble.appendChild(langTag);
                
                bubble.addEventListener('click', handleBubbleClick);
                gameContainer.appendChild(bubble);
            });
            
            matchedPairs = attempts = correctAttempts = 0;
            updateScorePanel();
            document.getElementById('successMessage').classList.remove('show');
        }

        function handleBubbleClick(event) {
            const bubble = event.currentTarget;
            if (bubble.classList.contains('matched')) return;
            
            if (selectedBubble) {
                if (selectedBubble === bubble) {
                    selectedBubble.classList.remove('selected');
                    selectedBubble = null;
                    return;
                }
                
                attempts++;
                const isMatch = selectedBubble.dataset.type !== bubble.dataset.type && 
                              selectedBubble.dataset.pairId === bubble.dataset.pairId;
                
                if (isMatch) {
                    selectedBubble.classList.add('matched');
                    bubble.classList.add('matched');
                    playSound('success');
                    matchedPairs++;
                    correctAttempts++;
                    updateScorePanel();
                    
                    if (matchedPairs === totalPairs) {
                        setTimeout(() => {
                            document.getElementById('successMessage').classList.add('show');
                            playSound('win');
                        }, 800);
                    }
                } else {
                    playSound('error');
                    setTimeout(() => {
                        selectedBubble.classList.remove('selected');
                        bubble.classList.remove('selected');
                    }, 500);
                }
                selectedBubble = null;
            } else {
                bubble.classList.add('selected');
                selectedBubble = bubble;
                playSound('click');
            }
        }

        function playSound(type) {
            // 简单的音效实现
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                if (type === 'success') {
                    oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime);
                } else if (type === 'error') {
                    oscillator.frequency.setValueAtTime(220, audioContext.currentTime);
                } else if (type === 'win') {
                    oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime);
                } else if (type === 'click') {
                    oscillator.frequency.setValueAtTime(392, audioContext.currentTime);
                }
                
                gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
                oscillator.start();
                gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3);
                oscillator.stop(audioContext.currentTime + 0.3);
            } catch (e) {
                console.log('音效播放失败');
            }
        }

        function updateScorePanel() {
            document.getElementById('matchedCount').textContent = matchedPairs;
            document.getElementById('totalCount').textContent = totalPairs;
            document.getElementById('attemptsCount').textContent = attempts;
            const accuracy = attempts > 0 ? Math.round((correctAttempts / attempts) * 100) : 0;
            document.getElementById('accuracyRate').textContent = `${accuracy}%`;
        }

        function restartGame() {
            initGame();
        }

        // 页面加载时初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>